<template>
  <div class="menu-fudong">
    <el-menu
      default-active="5"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <el-menu-item
        index="1"
        @click="isCollapse = !isCollapse"
        :label="isCollapse"
      >
        <el-radio-group v-model="isCollapse">
          <i class="el-icon-setting"></i>
        </el-radio-group>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">即梦AI&可灵</span>
        </template>
        <el-menu-item-group>
          <span slot="title">即梦AI</span>
          <el-menu-item index="textToVideo">文生视频</el-menu-item>
          <el-menu-item index="imageToVideo">图生视频</el-menu-item>
          <el-menu-item index="textToImage">文生图</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="可灵AI">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <!-- <el-submenu index="2-4">
          <span slot="title">选项4</span>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
        </el-submenu> -->
      </el-submenu>
      <el-menu-item index="testtest">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="4" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="1" v-back-to-top>
        <i class="el-icon-arrow-up"></i>
        <span slot="title">回到顶部</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { backToTop } from "@/directives/back-to-top";
export default {
  name: "EChartsExample",
  data() {
    return {
      isCollapse: true,
    };
  },
  directives: {
    backToTop,
  },
  mounted() {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      if (key !== "1") {
        this.$router.push({
          path: key,
          params: {
            baseData: "this.inputText",
          },
        });
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped>
.menu-fudong {
  position: fixed;
  bottom: 150px;
  /* 距离页面顶部的距离，可根据需求调整 */
  right: 10px;
  /* 距离页面右侧的距离，可根据需求调整 */
  z-index: 1000;
  /* 设置较高的层级，确保在其他元素之上，可根据实际情况调整 */
}
</style>